<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>系统登录</title>
    <link rel="icon" th:href="@{/images/favicon.ico}" type="image/x-icon"/>
  <link rel="stylesheet" th:href="@{css/login.css}">
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
</head>
<style>
    .b3{
        height: 45px;
        line-height: 45px;
        margin-bottom: 20px;
        display: flex;
    }
    .b3 .b31{
        flex: 1;
        padding: 0 2px;
    }
    .x-red{
        color: red;
    }
</style>
<body class="login-bg">

    <div class="login">
        <div class="message">系统登录</div>
        <div id="darkbannerwrap"></div>   
        <form th:action="@{/login}" method="post" class="layui-form" id="myfrom">
<!--            用户登录时的名字-->
            <input name="login_name" placeholder="用户名"  type="text" lay-verify="required" class="layui-input" >
            <hr class="hr15">
            <input name="phone" id="phone" lay-verify="required" placeholder="手机号"  type="text" class="layui-input">
            <hr class="hr15">
            <div class="b3">
                <div class="b31">
                    <input type="text" name="code" id="code" placeholder="短信验证码">
                </div>
                <div>
                    <input type="button" id="btn" value="发送验证码" onclick="sendMessage()">
                </div>
            </div>

            <span class="x-red" id="formwarn"></span>
            <hr class="hr15">

            <input value="登录" lay-submit lay-filter="login" style="width:100%;" type="button">
            <hr class="hr20" >
        </form>
    </div>
    <script>
        var InterValObj; //timer变量，控制时间
        var count = 60; //间隔函数，1秒执行
        var curCount;//当前剩余秒数
        var sms = "";
        function sendMessage() {
            curCount = count;
            $("#btn").attr("disabled", "true");
            $("#btn").val(curCount + "秒后可重新发送");
            InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次请求后台发送验证码 TODO
            var phone = $("#phone").val();
            var str = "";
            if(phone != ""){
                if(!(/^1[3456789]\d{9}$/.test(phone))){
                    str = "手机号错误";
                    document.getElementById("phone").innerText=str;

                } else{
                    str = "手机号可用";
                    document.getElementById("phone").innerText=str;
                    // ajax发送验证码请求
                    $.ajax({
                        url:"/sendSMS?phone="+$("#phone").val(),
                        success:function(code){
                            sms=code;
                            alert(sms);
                        }
                    });
                }
            } else{
                str = "手机号不能为空";
                document.getElementById("phone").innerText=str;
            }

        }
        //timer处理函数
        function SetRemainTime() {
            if (curCount == 0) {
                window.clearInterval(InterValObj);//停止计时器
                $("#btn").removeAttr("disabled");//启用按钮
                $("#btn").val("重新发送验证码");
            } else {
                curCount--;
                $("#btn").val(curCount + "秒后可重新发送");
            }
        }
        // 发送请求验证输入的验证码是否正确
        $(function() {
            $("#code").blur(function() {
                $.ajax({
                    url : "/checkCode?checkCode=" + $("#code").val(),

                    success : function(code_msg) {
                        $("#code_msg").html(code_msg);
                    }
                });
            });
        });



        $(function () {
            $("#myfrom").click(function () {
                var login_name = $("input[name='login_name']").val();
                var password = $("input[name='password']").val();
                if (login_name == "") {
                    $("#formwarn").text("用户名不能为空");
                    return false;
                }
                $.ajax({
                    type: "POST",
                    url: "/loginUser",
                    data: {login_name:login_name,phone:telephone},
                    async: false,
                    error: function (request) {
                        $("#formwarn").text("出错啦....");
                        return false;
                    },
                    success: function (result) {
                        //接收后台返回的结果
                        if (result.data == 1) {
                            $("#formwarn").text(result.msg);
                            return false
                        } else {
                            window.location.href = "/index"
                        }
                    }
                })
            })
        })
        </script>

    

    
</body>
</html>